<template>
    <div>
        <div class="login-bg" ref="bg" style="height:200px">
			
		</div>
		<div class="mui-content login-cont">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row login-li">
					<label>账号</label>
					<input id='account' v-model="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row login-li">
					<label>密码</label>
					<input id='password' v-model="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login'  @click="login" class="mui-btn mui-btn-block mui-btn-primary login-but">登录</button>
			</div>
		</div>
        <!-- <loading v-if="show_loading"></loading> -->
    </div>
</template>
<script>
import API from '@/service/api'
import loading from '@/components/loading'
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            username: '',
            // username: 'tthtest',
            password: '',

        }
    },
    components: { loading },
    computed: {
        ...mapState( [ 'show_loading' ] )
    },
    methods: {
        ...mapMutations([
            'RECORD_LOGIN_USER',
            'RECORD_TOKEN',
            'UPDATE_SHOW_LOADING',
        ]),
        async login() {
            this.UPDATE_SHOW_LOADING(true)
            let res = await API.login( 
                { 
                    username: this.username,
                    password: this.password 
                }
            )
            if(res.status == 'ok'){
                this.RECORD_LOGIN_USER(res.accountInfo)
                this.RECORD_TOKEN(res.token)
                let menu = await API.getMenu( { token: res.token } )
                this.UPDATE_SHOW_LOADING(false)
                this.$router.push( { path: menu[0].path } )
            }else{
                console.log('用户不存在')
            }
        }
    },
    created() {
        this.UPDATE_SHOW_LOADING(false)
    },
    mounted() {
        this.UPDATE_SHOW_LOADING(false)
        const cWidth = document.body.clientWidth
        this.$refs.bg.style.height = 0.045*cWidth + "rem"
    }
}
</script>
<style scoped>
@import "../../../assets/style/index.css";
</style>
